import React, {Component, Fragment} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from "mobx";
import {
    WeaLocaleProvider,
    WeaTab,
    WeaTop,
    WeaDialog,
    WeaNewScroll,
    WeaAlertPage,
    WeaMoreButton,
    WeaRightMenu,
    WeaLeftRightLayout,
    WeaFormItem,
    WeaSearchGroup,
    WeaTable,
    WeaCheckbox,
    WeaHelpfulTip,
} from "ecCom";
import {WeaSwitch} from 'comsMobx';
import {Button} from "antd";
import NoRightComponent from '../NoRightComponent.js';
import AddWorkflowMouldSetting from './AddWorkflowMouldSetting';
import ContractNameRuleComponent from './ContractNameRuleComponent';
import * as IconConstant from '../../constant/IconConstant.js';
import LanguageConstant from '../../constant/LanguageConstant';
import '../../style/mouldListPage.less';

const {getLabel} = WeaLocaleProvider;

@inject("workflowSettingStore", "contractNameRuleStore")
@observer
class BaseInfoSetting extends Component {

    render() {
        const {workflowSettingStore} = this.props;
        const {nodeOperateRightsColumns, closeDialog, loading, dialogVisible, settingId, contractNameRuleDialogVisible} = workflowSettingStore;
        const dialogBtns = this.getDiaglogBtns();
        const dialogTitle = this.getDialogTitle();
        return (
            <div className='baseinfo-setting-component'>
                <Fragment>
                    <div className="baseinfo-setting-form">
                        {this.renderForm()}
                    </div>
                    <div className="node-operate-rights-table-wrapper">
                        {this.rendernodeOperateRightsTable()}
                    </div>
                    <WeaDialog
                        onCancel={() => closeDialog()}
                        title={dialogTitle}
                        visible={toJS(dialogVisible)}
                        style={{width: "60%", height: 680}}
                        hasScroll
                        buttons={dialogBtns}
                        icon={IconConstant.WEADIALOG_ICON}
                        iconBgcolor={IconConstant.WEADIALOG_ICON_BG_COLOR}
                        className="add-workflow-setting-dialog"
                    >
                        <Fragment>
                            {contractNameRuleDialogVisible &&
                            <ContractNameRuleComponent settingId={settingId} isDefault={true}/>}
                        </Fragment>
                    </WeaDialog>
                </Fragment>
            </div>
        )
    }


    /**
     * 弹框标题
     */
    getDialogTitle = () => {
        const dialogTitle = getLabel(LanguageConstant.CONTRACT_NAME_RULE, "设置合同命名规则");
        return dialogTitle;
    }

    /**
     * 弹框底部按钮
     *
     * @returns {Array}
     */
    getDiaglogBtns = () => {
        const {workflowSettingStore} = this.props;
        const {loading} = workflowSettingStore;
        const buttons = [];
        buttons.push(<Button type="primary" disabled={loading}
                             onClick={() => this.saveContractNameRules()}>{getLabel(LanguageConstant.SAVE, "保存")}</Button>);
        return buttons;
    }

    /**
     * 保存合同命名规则
     */
    saveContractNameRules = () => {
        const {workflowSettingStore, contractNameRuleStore} = this.props;
        const {nodeOperateRightsColumns, closeDialog, loading, updateLoading, updateProperties} = workflowSettingStore;
        const beforeRequestCallback = () => {
            updateLoading(true);
        }
        const afterResponseCallback = () => {
            closeDialog();
            updateLoading(false);
        };
        updateProperties({contractNameRuleEdited: true});
        contractNameRuleStore.saveNameRules({}, beforeRequestCallback, afterResponseCallback);
    }

    /**
     * 渲染表单
     *
     * @returns {Array}
     */
    renderForm = () => {
        const {workflowSettingStore} = this.props;
        const {
            baseInfoSettingForm, baseInfoSettingFormConditions, openContractNameRuleDialog, contractNameRuleEdited, detectCustomPage, loading
        } = workflowSettingStore;
        const {isFormInit} = baseInfoSettingForm;
        let group = [];
        let col = 1;
        isFormInit && toJS(baseInfoSettingFormConditions).map(c => {
            let items = [];
            c.items.map(field => {
                if (field.conditionType == "INPUT" && field.domkey && field.domkey.includes("contractNameRule")) {
                    const {value} = field;
                    items.push({
                        com: (<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: `${6}`}}
                            ratio1to2
                            tipPosition="bottom"
                            wrapperCol={{span: `${18}`}}>
                            <div className="setLinkBox">
                                <i onClick={() => {
                                    openContractNameRuleDialog(true)
                                }} className="icon-coms-Flow-setting" style={{'cursor': 'pointer'}}/>
                                {
                                    (value == "true" || toJS(contractNameRuleEdited)) &&
                                    <i style={{'color': '#70d256'}} className="icon-coms-Selected"/>
                                }
                            </div>
                        </WeaFormItem>),
                        col: col,
                    });
                } else if (field.conditionType == "INPUT" && field.domkey && field.domkey.includes("detectCustomPage")) {
                    items.push({
                        com: (<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: `${6}`}}
                            ratio1to2
                            tipPosition="bottom"
                            wrapperCol={{span: `${18}`}}>
                            <Button type="primary" size="small" disabled={loading}
                                    onClick={() => detectCustomPage()}>{getLabel(LanguageConstant.DETECT_CUSTOM_PAGE, "自定义页面占用检测")}</Button>
                        </WeaFormItem>),
                        col: col,
                    });
                } else {
                    items.push({
                        com: (<WeaFormItem
                            label={`${field.label}`}
                            labelCol={{span: `${6}`}}
                            ratio1to2
                            tipPosition="bottom"
                            wrapperCol={{span: `${18}`}}>
                            <WeaSwitch fieldConfig={field} form={baseInfoSettingForm}/>
                        </WeaFormItem>),
                        col: col,
                    });
                }
            });
            group.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={true}
                                       items={items}/>)
        });
        return group;
    }


    rendernodeOperateRightsTable = () => {
        const {workflowSettingStore} = this.props;
        const {nodeOperateRightsColumns, nodeOperateRightsDatas, onNodeOperateRightsTableChange} = workflowSettingStore;
        const columns = toJS(nodeOperateRightsColumns);
        const datas = toJS(nodeOperateRightsDatas);
        const newColumns = columns.map(colum => {
            if (colum.dataIndex != "nodeName") {
                return {
                    ...colum, render: (text, record, index, onEdit) => {
                        const {dataIndex} = colum;
                        const value = record[dataIndex];
                        return (
                            <WeaCheckbox
                                value={value == true ? '1' : '0'}
                                onChange={(value) => {
                                    onNodeOperateRightsTableChange(record.nodeId, dataIndex, value, record);
                                }}
                            />
                        );
                    }
                };
            }
            return colum;
        });
        return (
            <div className="node-operate-rights-table-inner">
                {newColumns.length > 0 &&
                <div
                    className="node-operate-rights-table-title">{getLabel(LanguageConstant.NODE_RIGHT, '节点权限')}</div>}
                <WeaTable columns={newColumns} dataSource={datas} pagination={false}/>
            </div>)
    }

}

export default BaseInfoSetting;